// Override this file to add your own SCSS styling.
@import "mosaic/fonts";
@import "mosaic/mosaic-helpers";
@import "mosaic/alert";
@import "mosaic/buttons";
@import "mosaic/colors";
@import "mosaic/docs";
@import "mosaic/search";
@import "mosaic/section-pager";
@import "mosaic/site-footer";
@import "mosaic/simulator-coupling";
@import "mosaic/svg";
@import "mosaic/tutorials";
@import "mosaic/tooltip";
@import "mosaic/wg-cards";
@import "mosaic/wg-features-widget";
@import "mosaic/wg-hero";
@import "mosaic/wg-partners";
@import "mosaic/wg-page-header";
@import "mosaic/wg-portfolio";
@import "mosaic/wg-projects";
@import "mosaic/wg-text-image";
@import "mosaic/wg-text-card";

body {
  font-size: 0.9rem;
}

.navbar-brand img {
  max-height: 46px;
  height: 200px;
}

@media screen and (max-width: 576px) {
  .navbar-brand img {
    max-height: 34px;
  }
}

.article-style {
  font-size: 0.8rem;
}

a,
h3.article-title a {
  color: $mosaic-purple;

  &:hover {
    color: $mosaic-orange;
  }
}

a {
  font-weight: bold;
  color: #990c86;
  transition: all ease-in-out 0.1s !important;
  -webkit-transition: all ease-in-out 0.1s !important;
}

table {
  code {
    background-color: #eeebf0;
  }
}

table>tbody>tr:hover>td,
table>tbody>tr:hover>th {
  background-color: inherit;
}

table>tbody>tr:nth-child(odd)>td,
table>tbody>tr:nth-child(odd)>th {
  background-color: #f9f9f9;
}

table>tbody>tr:nth-child(2n)>td,
table>tbody>tr:nth-child(2n)>th {
  background-color: #f3f3f3;
}

iframe {
  border: 2px solid #ccc;
}

nav a {
  color: $mosaic-navy;
  font-weight: normal;
}

nav a,
h3.article-title a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: $mosaic-navy;
}

h1 {
  font-size: 1.75rem;
}

hr {
  height: 0;
}

p+ul,
p+ol {
  margin-top: -0.85rem;
}

.todo {
  background-color: yellow;
  border-radius: 2px;
  border: 1px solid red;
  padding: 2px 3px;

  &::before {
    content: "TODO: ";
    font-weight: bold;
    text-decoration: underline;
  }
}

body.page-docs #navbar-main>.container {
  max-width: 1700px;
}

@media only screen and (min-width: 1001px) {
  .universal-wrapper {
    width: 1200px;
  }
}

.navbar-brand {
  max-height: 57px;

  img {
    height: 47px;
    margin-top: 1px;
    max-height: none;
    max-width: none;
  }
}

#navbar-main {
  background-color: #f8f4fb;
  min-height: 70px;
  height: auto;
  padding: 7px 0;

  .main-menu-item ul li .nav-link {
    color: $mosaic-navy;

    &.active {
      color: $mosaic-purple  !important;
      text-decoration: underline;
    }
  }

  .navbar-icons .nav-item .nav-link {
    color: $mosaic-navy;
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-collapse#navbar-content-mobile {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .navbar-collapse {
    background-color: #f8f4fb;
    top: 70px;
  }
}

.home-section {
  padding: 50px 0 70px;
  background-color: #fff; //!important;   /* white */
  background-image: none !important;   /* remove gradients / images */
}

@media screen and (max-width: 576px) {
  .home-section {
    padding: 1rem 0;
  }
}

.section-heading {
  h1 {
    margin-bottom: 1rem;
  }

  p {
    color: #817f88;
    font-style: italic;
  }
}

.features .feature .feature-inner .image {
  width: 100%;
  text-align: center;
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
}

.wg-developers {
  .image-text-block:first-of-type {
    padding-bottom: 0.0rem;
    margin-bottom: 0.0rem !important;
  }

}

#partners {
  .image-text-block:first-of-type {
    padding-bottom: 0.8rem;
    margin-bottom: 1.9rem !important;
    border-bottom: 2px dotted #ccc;
  }

  .partner-logos {
    a img {
      transform: scale(1);
      -webkit-transition: transform ease-in-out 0.2s;
      transition: transform ease-in-out 0.2s;

      &:hover {
        transform: scale(1.07);
      }
    }
  }
}

#news img {
  border-radius: 0.7rem;
  border: 1px solid #aaa;
  box-shadow: 0 6px 6px -3px rgba(49, 2, 62, 0.25);
  background-color: #eae8f0 !important;   /* white */
  background-image: none !important;   /* remove gradients / images */
}

.changelog-item {
  margin-bottom: 0.2rem;

  .date {
    font-style: italic;
  }

  .dash {
    color: #bbb;
  }

  .title {
    font-style: italic;
  }
}

div.alert>div>ul>li>p {
  margin-bottom: 0;
}

.article-widget.wg-cards .cards .card {
  .image {
    margin-bottom: 0.4rem !important;
  }

  .subtitle {
    margin-bottom: 0 !important;
  }

  .text {
    font-size: 0.7rem;
  }
}

.article-footer {
  background-color: #eae8f0;
  padding-bottom: 3rem;
}

article.article.post figure img {
  border-radius: 5px;
  border: 1px solid #aaa;
  box-shadow: 0 14px 35px -3px rgba(49, 2, 62, 0.25);
}

.featured-image {
  border-radius: 5px;
  border: 1px solid #aaa;
  box-shadow: 0 18px 20px -3px rgba(49, 2, 62, 0.25);
}

.article-header-caption {
  right: 1px;
  bottom: 1px;
}

ul.nav-icons {
  font-size: 27px;
}

span.page_with_curl {
  background-color: #931c82;
  border-radius: 20px;
  display: inline-block;
  width: 45px;
  height: 28px;
  text-align: center;
  font-size: 0.8rem;
  color: black;
  margin-right: 7px;
  box-shadow: 0 0 9px -2px #44083b;
  text-shadow: 0 1px 2px #44083b;
  padding-top: 0px;
}

.inactive {
  color: #8a8a8a;
}
